<template>
  <div class="buttons">
    <el-button type="primary" :icon="Calendar" size="small">刷新日程</el-button>
    <el-button
      type="primary"
      :icon="Plus"
      @click="dialogFormVisible = true"
      size="small"
      >新增日程</el-button
    >
  </div>
  <div class="common-layout schedule">
    <el-container>
      <el-aside width="230px">
        <el-select
          style="margin-top: 5px"
          v-model="value"
          class="m-2"
          placeholder="全部日程"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <ul>
          <li>
            <p>材料出库</p>
            <p>2023-10-05</p>
            <p>
              <a href="">[编辑]</a>
              <a href="">[删除]</a>
              <a href="">[设为过期]</a>
            </p>
          </li>
          <el-divider />
          <li>
            <p>材料入库</p>
            <p>2023-10-07</p>
            <p>
              <a href="">[编辑]</a>
              <a href="">[删除]</a>
              <a href="">[设为过期]</a>
            </p>
          </li>
          <el-divider />
          <li>
            <p>项目交付</p>
            <p>2023-10-05</p>
            <p>
              <a href="">[编辑]</a>
              <a href="">[删除]</a>
              <a href="">[设为过期]</a>
            </p>
          </li>
        </ul>
      </el-aside>
      <el-main>
        <!-- 日历 -->
        <el-calendar>
          <template #date-cell="{ data }">
            <p :class="data.isSelected ? 'is-selected' : ''">
              {{ data.day.split('-').slice(1).join('-') }}
              {{ data.isSelected ? '✔️' : '' }}
            </p>
          </template>
        </el-calendar>
      </el-main>
    </el-container>
    <!-- 新建日程弹出框 -->
    <el-dialog v-model="dialogFormVisible" title="新增日程">
      <el-form :model="form" label-width="120px">
        <el-form-item label="日程标题">
          <el-input v-model="form.title" />
        </el-form-item>
        <el-form-item label="时间类型">
          <el-radio-group v-model="form.resource">
            <el-radio label="日期" />
            <el-radio label="日期+时间" />
          </el-radio-group>
        </el-form-item>
        <div class="block">
          <span class="demonstration">起止时间</span>
          <el-date-picker
            v-model="value1"
            type="datetimerange"
            range-separator="To"
            start-placeholder="Start date"
            end-placeholder="End date"
          />
        </div>
        <el-form-item label="日程内容">
          <el-input v-model="form.desc" type="textarea" rows="8" />
        </el-form-item>
        <el-form-item label="重要级别">
          <el-radio-group v-model="form.leval">
            <el-radio label="普通" />
            <el-radio label="重要" />
            <el-radio label="紧急" />
          </el-radio-group>
        </el-form-item>
        <el-form-item label="日程状态">
          <el-radio-group v-model="form.status">
            <el-radio label="有效" />
            <el-radio label="过期" />
          </el-radio-group>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="success">刷新</el-button>
          <el-button type="primary" @click="onSubmit"> 新增 </el-button>
          <el-button @click="dialogFormVisible = false" type="danger"
            >Cancel</el-button
          >
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { Plus, Calendar } from '@element-plus/icons-vue'
import { ref, reactive } from 'vue'

const value1 = ref<[Date, Date]>([
  new Date(2000, 10, 10, 10, 10),
  new Date(2000, 10, 11, 10, 10),
])

// do not use same name with ref
const form = reactive({
  title: '',
  region: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: '',
  leval: '',
  status: '',
})

const onSubmit = () => {
  console.log('submit!')
}

const dialogFormVisible = ref(false)

const value = ref('')

const options = [
  {
    value: 'Option1',
    label: '全部日程',
  },
  {
    value: 'Option2',
    label: '有效日程',
  },
  {
    value: 'Option3',
    label: '过期日程',
  },
]
</script>

<style lang="scss" scoped>
* {
  list-style: none;
}

.el-aside {
  text-align: center;
}

.is-selected {
  color: #1989fa;
}

.block {
  margin-bottom: 18px;
  margin-left: 52px;
}

.block .demonstration {
  padding-right: 12px;
}
.buttons {
  float: right;
  width: 300px;
  height: 40px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.schedule {
  float: left;
  width: 100%;
}
a {
  text-decoration: none;
}
// .setUp {
//   float: left;
//   width: 100%;
// }
</style>
